<template>
    <div class="app-container">
        <div class="mycontent">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="24" :md="12" :lg="18">
                <el-card class="update-log">
                  <div slot="header" class="myclearfix" :key="article.articleId" >
                    <h1 class="texttitle">{{ article.title }}</h1>
                    <span class="small">{{ article.createTime }}</span>
                    <span  v-if="dict.type.sys_resource_type.length > 0 && article.dictType>0 && article.dictType< dict.type.sys_resource_type.length">
                      <span class="small">分类：{{ dict.type.sys_resource_type[article.dictType].label}}</span>
                    </span>
                    <span class="small a" @click="tobottom">评论(0)</span>
                    
                    <div class="massagecenter" v-if="article.url!=null && article.url!=''"> 
                    <div class="Brief">
                    <h3 class="title">{{ article.title }}</h3>
                    <br>
                    <h3 class="title">百度云链接：
                      <a href="#" class="atitle">{{ article.url }}</a>
                    </h3>
                    </div>
                  </div>
                  </div>
                  <article class="article-content">
                    <div v-html="article.content" class="ql-editor"></div>
                  </article>
                  <div class="posts">
                    <el-button type="warning" class="dzbt" @click="dianzan(article)"><i class="iconfont icon-good"></i>赞({{ article.likeCount }})</el-button>
                  </div>
                  <div class="copyright">
                    未经过允许不得转载:
                    <span>宽视站</span>>>
                    <span>{{ article.title }}</span>
                  </div>
                  <div class="action-share">
                    分享到：更多(0)
                  </div>
                  <el-row type="flex">
                    <el-col :span="12" v-if="articleList.length>0">
                      <div class="rightlast" v-if="articleList[article.articleId-2]!=''&&articleList[article.articleId-2]!=null">
                        上一篇
                        <br>
                        <span class="a" @click="addclicknum(articleList[article.articleId-2])">{{ articleList[article.articleId-2].title }}</span>
                      </div>
                    </el-col>
                    <el-col  :span="12" v-if="articleList.length>0">
                      <div class="leftlast" v-if="articleList[article.articleId]!=''&&articleList[article.articleId]!=null">
                        下一篇
                        <br>
                        <span class="a" @click="addclicknum(articleList[article.articleId])">{{ articleList[article.articleId].title }}</span>
                      </div>
                    </el-col>
                  </el-row>

                  <div class="title ttmg">相关推荐</div>
                  <div class="greyline"></div>
                  <el-row :gutter="20">
                    <el-col :span="6" class="tjmargin" v-for="item in limitedrecommend" :key="item.articleId">
                      <div class="tupian a " v-if="item.imgurl==null||item.imgurl==''">  
                      </div>
                      <div class="tupian a" v-if="item.imgurl!=null&&item.imgurl!=''">  
                        <img :src="item.imgurl" width="100%" height="100%" @click="addclicknum(item)">
                      </div>
                      <!-- <div class="tupian"></div> -->
                      <a @click="addclicknum(item)">{{ item.title }}</a>
                    </el-col>
                  </el-row>

                  <div class="text" id="bottom-element-id">
                    <h3 class="commet">评论</h3>
                    <span class="smalltext">抢沙发</span>
                    <div class="greyline"></div>
                  </div>
                
                  <div class="bg">
                    <h3 class="bgtitle">评论前必须登录！</h3>
                    <div>
                      <el-button type="warning" class="btlogn" size="medium" @click="loginDialogVisible = true">登录</el-button>
                      <el-button type="info" plain size="medium" @click="registerDialogVisible = true">注册</el-button>
                    </div>
                  </div>

                </el-card>
              </el-col>
              <el-col :xs="24" :sm="24" :md="12" :lg="6">
                <el-card class="update-log">
                  <div slot="header">
                    <h3 class="title">热门文章</h3>
                  </div>
                  <div>
                    <el-row type="flex" class="rmwz" v-for="item in limitedItems" :key="item.articleId">
                      <el-col :span="10">
                        <div class="zhanwei a" v-if="item.imgurl==null||item.imgurl==''">  
                          <i class="el-icon-picture-outline"></i>  
                        </div>
                        <div class="zhanwei a" v-if="item.imgurl!=null&&item.imgurl!=''">  
                          <img :src="item.imgurl" width="100%" height="100%" @click="addclicknum(item)">
                        </div>
                      </el-col>
                      <el-col :span="14"><div class="click"> 
                          <span class="text" @click="addclicknum(item)">{{ item.title }}</span>
                          <br>
                          <span class="small">{{ item.createTime }}</span>
                          <br>
                      </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-card>
                
                <el-card class="update-log">
                  <div slot="header">
                    <h3 class="title">热门标签</h3>
                  </div>
                  <div class="body">
                    <el-tag size="medium" :type="getColor(item.labelId)" class="tag" @click="toClassRetrieval(item)" v-for="item in options" :key="item.labelId">{{ item.labelName }}</el-tag>
                  </div>
                </el-card>

                <el-card class="update-log">
                  <div slot="header" class="clearfix">
                    <h3 class="title">网站统计</h3>
                  </div>

                  <div class="body">
                    <el-descriptions>
                    <el-descriptions-item label="日志总数" labelStyle=" font-weight: bold;">14121</el-descriptions-item>
                    <el-descriptions-item label="评论总数" labelStyle=" font-weight: bold;">4</el-descriptions-item>
                    <el-descriptions-item label="标签总数" labelStyle=" font-weight: bold;">370</el-descriptions-item>
                    <el-descriptions-item label="页面总数" labelStyle=" font-weight: bold;">3</el-descriptions-item>
                    <el-descriptions-item label="分类总数" labelStyle=" font-weight: bold;">8</el-descriptions-item>
                    <el-descriptions-item label="链接总数" labelStyle=" font-weight: bold;">0</el-descriptions-item>
                    <el-descriptions-item label="用户总数" labelStyle=" font-weight: bold;">5</el-descriptions-item>
                    <el-descriptions-item label="最后更新" labelStyle=" font-weight: bold;">2024-03-06</el-descriptions-item>
                    </el-descriptions>
                  </div>
                </el-card>
              </el-col>
            </el-row>
        </div>

        <div class="footer">
            <p>版权所有 &copy; 2024 示例公司</p>  
            <p>联系我们: <a href="#">example@example.com</a></p>  
            <p><a href="#">网站地图</a></p>  
        </div>

          
    <el-dialog :visible.sync="loginDialogVisible" width="500px">
      <span slot="title" class="title">登录</span>
      <el-form :model="form" label-width="50px" :rules="rules" label-position="top">
        <el-form-item prop="account">
          <span slot="label">用户名邮箱</span>
          <el-input placeholder="请输入您的用户名或邮箱" v-model="form.account"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <span slot="label">密码</span>
          <el-input placeholder="请输入您的密码" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning">登录</el-button>
          <el-button type="warning" plain @click="canel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="registerDialogVisible" width="500px">
      <span slot="title" class="title">注册</span>
      <el-form :model="form" label-width="50px" :rules="rules" label-position="top">
        <el-form-item prop="username">
          <span slot="label">昵称</span>
          <el-input placeholder="请输入您的昵称" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item prop="useremail">
          <span slot="label">邮箱</span>
          <el-input placeholder="请输入您的邮箱" v-model="form.useremail"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning">快速注册</el-button>
          <el-button type="warning" plain @click="canel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    </div>

</template>

<script>
import { updateArticle,getArticle,rmlistArticle,nplistArticle } from "@/api/system/article";
import { listLabel } from "@/api/system/label";
import "quill/dist/quill.core.css";

export default {
  name: "Article",
  dicts: ['sys_resource_type'],
  data() {
    return {
      loginDialogVisible:false,
      registerDialogVisible:false,
      title:'',
      form:{
        account:'',
        username:'',
        useremail:'',
        password:''
      },
      rules: {
        account:[
        { required: true, message: "用户名或邮箱不能为空", trigger: "blur" }
        ],
        username:[
        { required: true, message: "用户昵称不能为空", trigger: "blur" }
        ],
        useremail:[
        { required: true, message: "用户邮箱不能为空", trigger: "blur" }
        ],
        password:[
        { required: true, message: "用户密码不能为空", trigger: "blur" }
        ],
      },
      options: [], 
      types: ['success', 'danger', 'medium', 'info', 'warning',''],
      tagname:'',
      // 总条数
      total: 0,
      // 推荐文章查询表格数据
      tjarticleList: [],
      // 文章查询表格数据
      articleList: [],
      // 热门文章查询表格数据
      rmarticleList: [],
      article:{},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        likeCount: null,
        dictType: null,
        introduce: null,
        url: null,
        content: null,
        feedbackChose: null,
        imgurl:null
      },
      articleid:0,
      shouldScroll:0,
      myscroll:false
    };
  },
  created() {
    this.articleid  = this.$route.params.articleid;
    this.getList();
  },
  updated(){
    if(this.$route.query.scrollTo!=null&&this.myscroll==false){
      console.log(this.shouldScroll);
      //为了保证在数据更新之后在进行向下滚动
      if (this.shouldScroll>3) {  
        const bottomElement = document.getElementById('bottom-element-id');  
        bottomElement.scrollIntoView({ behavior: 'smooth' }); 
        this.myscroll=true;
      }
      this.shouldScroll++;
    }
  },
  computed: {
    getColor() {  
    return (index) => {  
      return this.types[index % this.types.length];  
    };  
    },  
    limitedItems() {  
      const LIMIT = 5; // 这里设置你想要的循环次数  
      return this.rmarticleList.slice(0, LIMIT);  
    },
    limitedrecommend(){
      let temporaryarr = [];
      for(let i=0,j=0;i<8;i++){
        if(j>this.tjarticleList.length-1){ console.log("进入了break"); break;}
        if(this.tjarticleList[j].articleId==this.articleid){
          j++;
          i--;
          console.log("进入了continue")
          continue;
        }
        console.log("正常赋值 ")
        temporaryarr[i]=this.tjarticleList[j];
        j++;
      }
      console.log(temporaryarr)
      return(temporaryarr);
    }
  },
  methods: {
    tobottom(){
      const bottomElement = document.getElementById('bottom-element-id');  
      bottomElement.scrollIntoView({ behavior: 'smooth' }); 
      console.log("tobottom被调用");
    },
    /** 查询文章查询列表 */
    getList() {
      this.loading = true;
      listLabel(this.queryParams).then(response => {
        this.options = response.data;
      });
      nplistArticle(this.queryParams).then(response => {
        this.articleList = response.data;
      });
     
      rmlistArticle(this.queryParams).then(response => {
        this.rmarticleList = response.data;
      });

      getArticle(this.articleid).then(response => {
        this.article = response.data;
        this.queryParams.dictType=response.data.dictType;
        nplistArticle(this.queryParams).then(response => {
        this.tjarticleList = response.data;
        })
        
        this.loading = false;
      });
    
    },
    todetails(){
      this.$router.push({ name: 'tagpage', params: { tag: this.tagname }})
    },
    dianzan(article){
      if(article.likeCount===0){
        article.likeCount++;
      }
      else{
        article.likeCount--;
      }
      updateArticle(article);
    },
    handleLogin() {  
      // 处理登录逻辑  
      this.loginDialogVisible = false; // 登录完成后关闭对话框  
    },  
    handleRegister() {  
      // 处理注册逻辑  
      this.registerDialogVisible = false; // 注册完成后关闭对话框  
    },
    toClassRetrieval(item){
      this.$router.push({name:'tagpage',params:{tag:item.labelName}});
    },
    canel(){
      this.form.username='';
      this.form.useremail='';
      this.form.password='';
      this.form.account='';
      this.registerDialogVisible = false;
      this.loginDialogVisible = false;
    },
    addclicknum(item){
      item.clicknum++;
      updateArticle(item);
      this.$router.push({name:'content',params:{articleid:item.articleId}});
      location.reload()
    },
       
  }
};
</script>

<style scoped>
.ql-align-center{
  margin-left: 100px;
}
.atitle:hover{
  color: #cf2e2e;;
}
.atitle{
  color: #FDAC5F;
}
.massagecenter{
  text-align: center;
}
.Brief{
  display: inline-block;
  text-align: center;
  padding:10px 20px;
  border-left: 4px solid #DBDBDB;
  margin: 20px 0;
}
.el-form-item{
  width: 80%;
  margin: 0 auto 20px auto;
}
.btlogn{
  width: 100px;
}
.bgtitle{
  margin-bottom: 15px;
  color: #777777;
  font-size: 18px;
  font-weight: normal;
}
.bg{
  background-color: #F6F6F6;
  width: 100%;
  text-align: center;
  padding: 50px 20px;
}
.commet{
  margin: 0;
  font-weight: bold;
  font-size: 16px;
  color: #666;
  display: inline-block;
}
.text{
  margin-top: 40px;
  margin-bottom: 25px;
}
.smalltext{
  margin-left: 5px;
  font-size: 10px;
  color: #999999;
}
.ttmg{
  margin-top: 60px;
}
.tjmargin{
  margin-bottom: 15px;
}
.tupian{
  height: 300px;
  border: 1px solid rgb(212, 212, 212);
  margin-bottom: 10px;
}
.testborder{
  border: 1px solid red;
}
.greyline{
  margin-top: 10px;
  width: 100%;
  border-bottom: 1px solid #E6EBF5;
  margin-bottom: 20px;
}
.action-share{
  text-align: center;
  margin: 18px 0px 36px 0px;
}
.copyright:hover{
  background-color: #FBB823;
  color: white;
}
.copyright{
  text-align: center;
  background-color: #EFEDEE;
  padding: 8px 0px;
  font-size: 14px;
  color: #999999;
}
.posts{
  text-align: center;
  margin: 36px 0;
}
.dzbt{
  width: 100px;
  padding: 10px 5px;
}
.article-content{
  line-height: 1.9;
  color: #555;
}
.myimg{
  text-align: center;
}
.small{
  margin-right: 20px;
  font-size: 14px;
  color: #999999;
}
.rightlast{
  color: #999999;
  border-right: 1px solid #E6E6E6;
}
.leftlast{
  color: #999999;
  text-align: right;
}
.myclearfix{
  text-align: center;
}
h3{
  margin: 5px 0;
}
.active{
  color: #fcb900;
}
.right{
  float: right;
}
.app-container{
    padding: 0px;
}
.footer {  
  margin-top: 80px;
  background-color: #333;  
  color: #fff;  
  padding: 20px;  
  text-align: center;  
  width: 100%;  
  }  
.texttitle{
  color: #666;
  font-weight: bold;
}
.title{
    font-weight: bold;
    font-size: 16px;
    color: #666;
}
.mycontent{
    margin: 0px 80px;
}
.update-log{
  margin-bottom: 20px;
}
.row-bg:hover{
  background-color: #EFEFEF;
}
.click:hover{
  color: #fcb900;
  cursor: pointer;
}
.tag{
    margin:5px 5px;
    cursor: pointer;
}
.zhanwei{
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100%;
  border: 1px solid rgb(212, 212, 212);
  margin-right: 10px;
  background-color: #EFEFEF;
}
.a:hover{
  cursor: pointer;
}
.row-bg{
  border: 1px solid rgb(212, 212, 212);
  padding: 20px;
}
.rmwz{
  border: 1px solid rgb(212, 212, 212);
  padding: 20px;
}

.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
</style>